<extend name="Phone:common"/>
<block name="main">
    <style>
        .swiper-container {
            height: 200px;
        }
        .swiper-button-prev, .swiper-button-next {
            width: 25px;
            height: 25px;
        }
    </style>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <foreach name="slide" item="item">
                <div class="swiper-slide">
                    <img style="width: 100%;height: 100%;" src="{$item.pic}" alt="{$title}">
                </div>
            </foreach>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
    <div class="tit">
        <if condition="$currentCategory"><h2>{$currentCategory.catname}</h2>
            <else /> <h2>推荐精彩博文</h2>
        </if>
    </div>
    <div class="list4">
        <ul id='contain1'>
        </ul>
    </div>
    <div class="more" id="morea"><a href="javascript:void(0)" class="load_page" id="load_page10">点击加载更多</a></div>
    <script>
        $(function () {
            page = 1;
            pagers_load(page);
            pagers_id = 1;
            $("#load_page10").click(function () {
                pagers_id = pagers_id + 1;
                pagers(pagers_id);
            });

        })

        function pagers(pagers_id) {

            $.ajax({
                type: "get",
                url: `/getArticleMore/{$currentCategory.id}?page=${pagers_id}`,
                dataType: 'json',
                success: function (msg) {
                    var myobj = msg.data.article;
                    if (!myobj) {
                        $("#morea").hide();
                        return false
                    }
                    for (var i = 0; i < myobj.length; i++) {

                        // var data_html="<a href='/article_pt.html?arcid="+myobj[i].id+"'><dl class='news'><dt id='image_"+page+"_"+i+"'><img src='"+myobj[i].imageurl+"' alt=''></dt><dd>"+myobj[i].title+"<br/><span class='time'>"+myobj[i].createtime+"</span><span class='comments'>"+myobj[i].commentcount+"</span></dd></dl></a>";
                        var data_html = "<li><a href='/articleType/" + myobj[i].parent.id + "' class='fenlei2'><i>【" + myobj[i].parent.catname + "】</i></a><a href='/news/" + myobj[i].id + "'>" + myobj[i].title + "</a></li>";
                        $("#contain1").append(data_html);
                        if (myobj[i].imageurl == '') {
                            $("#image_" + page + "_" + i).hide();
                        }
                    }
                }
            })

        }

        function pagers_load(page) {
            $.ajax({
                type: "get",
                url: `/getArticleMore/{$currentCategory.id}?page=${page}`,
                dataType: 'json',
                success: function (msg) {
                    var myobj = msg.data.article;
                    for (var i = 0; i < myobj.length; i++) {

                        // var data_html="<a href='/article_pt.html?arcid="+myobj[i].id+"'><dl class='news'><dt id='image_"+page+"_"+i+"'><img src='"+myobj[i].imageurl+"' alt=''></dt><dd>"+myobj[i].title+"<br/><span class='time'>"+myobj[i].createtime+"</span><span class='comments'>"+myobj[i].commentcount+"</span> </dd></dl></a>";
                        var data_html = "<li><a href='/articleType/" + myobj[i].parent.id + "' class='fenlei2'><i>【" + myobj[i].parent.catname + "】</i></a><a href='/news/" + myobj[i].id + "'>" + myobj[i].title + "</a></li>";
                        $("#contain1").append(data_html);

                    }


                }
            })
        }
    </script>
    <script>
        var mySwiper = new Swiper ('.swiper-container', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            }
        })
    </script>
</block>
